﻿@page "/rich-text-editor/auto-save"

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.RichTextEditor

@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        This sample demonstrates how to save the Rich Text Editor’s content automatically with periodic interval. When you type or edit the content, it will be saved automatically every 5 seconds.
    </p>
</SampleDescription>
<ActionDescription>
    <p>
        The Rich Text Editor provides options to save its content automatically using the <code>SaveInterval</code> property. By default, the save interval time has 10 seconds from built-in support, but it can be customized as per the application needs. The interval
        is calculated based on editing the content and will not be considered on idle state.
    </p>
    <p>We have configured save interval as 5 seconds in this example. You can save the content in the server also using this ‘Auto Save’ option.</p>
    <p>When you disable this 'Auto Save' option in a sample, the value will be saved on focus-out from the editor.</p>
    <p>Rich Text Editor content will be automatically saved when you focus out the editor.</p>
</ActionDescription>

<div class="col-lg-8 control-section">
    <div class="control-wrapper">
        <div class="sample-container">
            <div class="default-section">
                <SfRichTextEditor ID="AutoSave" SaveInterval="saveInterval" EnablePersistence="true" AutoSaveOnIdle="true" Placeholder="Start to type a content to save">
                    <p>Type or edit the content to be saved automatically in the editor </p>
                    <RichTextEditorToolbarSettings Items="@Items" />
                    <RichTextEditorEvents ValueChange="UpdateStatus" />
                </SfRichTextEditor>
                <div id='statusEle' class='current-status'>
                    <div id='saving' class="@savingClass">
                        <div class="e-icons e-icon-refresh"> </div>
                        <p class='status-text'> Saving changes</p>
                    </div>
                    <div id='saved' class="@savedClass">
                        <span class="e-icons e-icon-tick"> </span>
                        <p class='status-text'>Changes saved</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div><div class="property-panel-content">
            <div id="property" title="Properties" class="property-panel-table">

                <div class="toggle-btn">
                    <div class="btn-text" style="display: inline">Auto Save</div>
                    <SfSwitch @bind-Checked="switchChecked" TChecked="bool" ValueChange="OnChange" />
                </div>
            </div>
        </div>
    </div>
</div>

@code{
    private bool switchChecked { get; set; } = true;
    private int saveInterval { get; set; } = 5000;
    private string savedClass { get; set; } = "hide";
    private string savingClass { get; set; } = "hide";

    private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };

    private async Task OnChange(ChangeEventArgs<bool> args)
    {
        this.saveInterval = args.Checked ? 5000 : 0;
        await Task.Delay(500);
        this.savedClass = this.savedClass = "hide";
    }

    private async Task UpdateStatus(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        if (this.switchChecked)
        {
            this.savingClass = "show";
            this.savedClass = "hide";
            // Place the codes here, which save the Rich Text Editor value into database.
            await Task.Delay(500);
            this.savingClass = "hide";
            this.savedClass = "show";   
        }
    }
}

<style>
    .current-status {
        float: right;
        padding: 11px;
        margin-right: 22px;
        font-size: 12px;
        display: inline-block;
    }

    .hide {
        display: none;
    }

    .show {
        display: block;
    }

    .e-icons.e-icon-refresh::before {
        content: "\e606";
    }

    .btn-text {
        display: inline;
        padding: 2px 35px 2px 64px;
    }

    .e-icons.e-icon-tick::before {
        content: "\e614";
    }

    .bootstrap4 .e-icons.e-icon-tick::before {
        content: "\e7ab";
    }

    .bootstrap4 .e-icons.e-icon-refresh::before {
        content: "\e710";
    }

    .tailwind .e-icons.e-icon-refresh::before {
        content: "\e711";
    }

    .tailwind .e-icons.e-icon-tick::before {
        content: "\e75d";
    }

    .status-text {
        padding: 4px;
    }

    .e-icon-refresh {
        width: 10px;
        display: inline-block;
        animation: spin 2s linear infinite;
    }

    @@keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .status-text {
        font-size: 14px;
        display: inline-block;
    }
</style>